<template>
    <div class="Layout">
        <Menu :Model="Model" @UseActiveModel="UseActiveModel"></Menu>
        <Map ref="MapView"></Map>
        <Form ref="FormView"></Form>

        <div class="MoveObject" v-if="ActiveModel" :style="{
            top: y + 'px',
            left: x + 'px'
        }">
            {{ ActiveModel?.Base.Name }}
        </div>
    </div>
</template>
<script setup>
import Map from './View/Map.vue'
import Menu from './View/Menu.vue'
import Form from './View/Form.vue'

import Station from '../config/Station'

import { useMouse } from '@vueuse/core'
import { ref, provide, onMounted, nextTick } from 'vue'

import { GetCommonStore } from '../store/Common'
import { CreateExModel } from './ExModel'

import { GetLayer } from './ExModel'

const Model = ref({
    Station,
})

const ActiveModel = ref(null);
provide('ActiveModel', ActiveModel);

const { x, y } = useMouse({ touch: false });

const MapView = ref();
const FormView = ref();
const CStore = GetCommonStore();
const DataView = [];


const SelectModel = ref(null);


const UseActiveModel = function () {
    const _SelectModel = CreateExModel(JSON.parse(JSON.stringify(ActiveModel.value)));
    SelectModel.value && (SelectModel.value.Select = false);
    SelectModel.value = _SelectModel;
    ActiveModel.value = null;
    MapView.value.SetModel(_SelectModel, () => {
        DataView.push(_SelectModel);
        FormView.value.SetModel(_SelectModel);
        CStore.RightStatus = true;
        _SelectModel.Select = true
    });
}


let Layer;

onMounted(() => {
    nextTick(() => {
        Layer = GetLayer();
        Layer.on('Click', (val) => {
            SelectModel.value && (SelectModel.value.Select = false);
            FormView.value.SetModel(val.Model);
            SelectModel.value = val.Model;
            val.Model.Select = true;
            CStore.RightStatus = true;
        })
    })
})





</script>
<style lang="less" scoped>
.MoveObject {
    border: 1px solid #CCC;
    padding: 4px 10px;
    pointer-events: none;
    position: absolute;
}
</style>